import React, { Component } from 'react';
import {
  StyleSheet, View, Text,
} from 'react-native';
import Echarts from 'native-echarts';

const option = {
  // legend: {
  //     orient: 'vertical',
  //     left: 'left',
  //     data: ['非生产性工时', '生产性工时']
  // },
  tooltip: {
    trigger: 'item', // 触发类型，饼图用
    formatter: '{b} : {c} ({d}%)',
  },
  series: [
    {
      type: 'pie',
      hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
      radius: '55%', // 饼图的半径。外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度
      center: ['50%', '50%'], // 饼图的圆心坐标，第一项是相对于容器宽度，第二项是相对于容器高度
      itemStyle: {
        label: {
          position: 'inner',
        },
        color: ['rgba(255,0,0,1)', 'rgba(0,255,0,1)'],
      },
      // label:{
      //     show: false,
      //     position: 'center',
      //     color:['rgba(255,0,0,1)','rgba(0,255,0,1)'],
      //     //position : 'inside',
      // },
      data: [
        { value: 60, name: '生产性工时' },
        { value: 10, name: '非生产性工时' },
      ],
    },
  ],
};
class WeekSummary extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

  }

  render() {
    // Echarts
    // width The width of the chart. The default value is the outer container width.
    // height (number): The height of the chart. The default value is 400.
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.titleView}>
          <Text>Cloud JSTI</Text>
          <Text>请尽快填写本周日报，下周一不允许修改本周数据。</Text>
        </View>
        <View style={styles.contentView}>
          <View>
            <Text style={styles.text}>一周工作小结</Text>
            <Text style={styles.text}>2020/05/04--2020/05/10</Text>
            <Text style={styles.text}>总工时   70小时</Text>
          </View>
          <Echarts option={option} height={300} />
          <View>
            <Text>请尽快填写本周日报，下周一不允许修改本周数据。</Text>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  titleView: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: 50,
    borderColor: '#ECEDEE',
    borderWidth: StyleSheet.hairlineWidth,
  },
  contentView: {
    flex: 1,
    paddingHorizontal: 20,
  },
  text: {
    paddingVertical: 8,
    fontSize: 20,
    fontWeight: 'bold',
  },
});
export default WeekSummary;
